<template>
	<view>
		<!--公共头部-->
		<view class="head">
			<my-header title="财务账本明细"></my-header>
		</view>
		
		<view class="main-body">
			<view class="dis_flex jus-cen ziti-bai fon-siz-12 mar-bot-5">2021-11-09</view>
			<view><u-gap height="1" bg-color="#fff"></u-gap></view>
			<view style="padding-left:20%;">
				<view class="ziti-bai padding-5 mar-top-15 dis_flex ali-ite">
					<view>当前账本：</view>
					<view>
						<xfl-select 
						:list="list"
						:clearable="false"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="true"  
						:style_Container="listBoxStyle"
						:placeholder = "'placeholder'"
						:initValue="zhangbenValue"
						:selectHideType="'independent'"
						@change="listChange"
						>
						</xfl-select>
					</view>
				</view>
				<view class="ziti-bai padding-5 dis_flex ali-ite">
					<view>当前周期：</view>
					<view @click="show = true">{{rlTime}}</view>
					<view><u-calendar v-model="show" :mode="mode" @change="change"></u-calendar></view>
					<!-- <view><u-button @click="show = true">打开</u-button></view> -->
				</view>
			</view>
			<view class="dis_flex jus-cen mar-top-20" style=" padding-bottom:10px;">
				<view style="width:460rpx;">
					<u-subsection height="50" bg-color="#fff" active-color="#fff" button-color="#0051BA" font-size="20" :list="subsectionList" @change="subsectionChange" :current="1"></u-subsection>
				</view>
			</view>
		</view>
		
		<view>
			<view class="padding-10 table-h dis_flex jus-cen">
				<view>{{moneyType}}总计：</view>
				<view>{{money}}元</view>
			</view>
			<view class="sr_focus" style="padding:0px 3px;">
				<!--收入表格标题-->
				<view v-if="shouruShow" class="table dis_flex">
					<view class="t-1">日期</view>
					<view class="t-2">财务项目</view>
					<view class="t-3">费用明细</view>
					<view class="t-6">费用说明</view>
					<view class="t-4">金额</view>
					<view class="t-5">记录人</view>
				</view>
				<!--支出表格标题-->
				<view v-if="zhichuShow" class="table dis_flex">
					<view class="zhichut-1">日期</view>
					<view class="zhichut-2">财务项目</view>
					<view class="zhichut-3">费用明细</view>
					<view class="zhichut-6">费用说明</view>
					<view class="zhichut-4">金额</view>
					<view class="zhichut-5">报销/录入/划扣</view>
				</view>
				<!--总汇表格标题-->
				<view v-if="zonghuiShow" class="table dis_flex">
					<view class="zonghuit-1">日期</view>
					<view class="zonghuit-2">收入</view>
					<view class="zonghuit-3">支出</view>
					<view class="zonghuit-6">利润</view>
					<!-- <view class="zonghuit-4">报销/录入人</view> -->
					<!-- <view class="zonghuit-5">备注</view> -->
				</view>
				<block v-if="data">
					<!--收入表格-->
					<block v-if="shouruShow">
						<view v-for="(item, index) in data" :key="index" class="table2 dis_flex">
							<view class="t-1">{{item.c_time}}</view>
							<view class="t-2">{{item.cost}}</view>
							<view class="t-3">{{item.reimbursement}}</view>
							<view class="t-6">{{item.explain}}</view>
							<view class="t-4">{{item.money}}</view>
							<view class="t-5">{{item.name}}</view>
						</view>
					</block>
					<!--支出表格-->
					<block v-if="zhichuShow">
						<view v-for="(item, index) in data" :key="index" class="table2 dis_flex">
							<view class="zhichut-1">{{item.c_time}}</view>
							<view class="zhichut-2">{{item.cost}}</view>
							<view class="zhichut-3">{{item.reimbursement}}</view>
							<view class="zhichut-6">{{item.explain}}</view>
							<view class="zhichut-4">{{item.money}}</view>
							<view class="zhichut-5">{{item.name}}</view>
						</view>
					</block>
					<!--总汇表格-->
					<block v-if="zonghuiShow">
						<view class="table2 dis_flex">
							<view class="zonghuit-1">{{data.straTime}} 至 {{data.endTime}}</view>
							<view class="zonghuit-2">{{data.income}}</view>
							<view class="zonghuit-3">{{data.expenditure}}</view>
							<view class="zonghuit-6">{{data.profit}}</view>
							<!-- <view class="zonghuit-4">周扬</view> -->
							<!-- <view class="zonghuit-5">暂时没有什么好备注的</view> -->
						</view>
					</block>
				</block>
				<block v-if="data==''">
					<view style="margin-top:50px;">
						<u-empty text="暂无数据" mode="message"></u-empty>
					</view>
				</block>
			</view>
		</view>
		
		<view v-show="pageShow" style="margin-top:30px;">
			<page-pagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage" :showAround="true" :btnText="true" :showPageInfo="true" @change="pageChange"></page-pagination>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default {
		data() {
			return {
				page: {
					total: 13,		// 共条数
					pageSize: 7,	// 每页数量
					currentPage: 1 	// 当前页数
				},
				relation_type : 3, 
				money     : '',
				accountBook : '',
				moneyType : '支出',
				zhichuShow : true,   // 支出显示
				shouruShow : false,  // 收入显示
				zonghuiShow : false, // 总汇显示
				pageShow    : true, // 分页显示
				data : '',
				zhangbenValue : '',
				subsectionList: [
					{
						name: '收入'
					}, 
					{
						name: '支出'
					}, 
					{
						name: '总汇'
					}
				],
				current: 1 ,
				rlTime	  : '选择时间',
				straTime  : '选择时间', // 当前周期
				endTime   : '选择时间',
				sheetShow : false,
				show: false,
				mode: 'range' ,
				listBoxStyle: `height: 25px; font-size: 11px;`,
				list: [
					{value:'乐山市',type:1},
					{value:'眉山市',type:2},
					{value:'海口市',type:3},
					{value:'小怪线充项目',type:4},
					{value:'桩柜产销项目',type:5},
					{value:'公司',type:6},
				],
			}
		},
		onLoad(param) {
			this.load();
			this.accountBook = param.type;
			if(param.type==1){ this.zhangbenValue = '乐山市' }
			if(param.type==2){ this.zhangbenValue = '眉山市' }
			if(param.type==3){ this.zhangbenValue = '海口市' }
			if(param.type==4){ this.zhangbenValue = '小怪线充项目' } 
			if(param.type==5){ this.zhangbenValue = '桩柜产销项目' }
			if(param.type==6){ this.zhangbenValue = '公司' }
			
			// 同步请求账本数据
			this.getParam( this.accountBook, 3 );
		},
		methods:{
			// 分页功能
			pageChange(currentPage, type) {
				this.load();
				this.page.currentPage = currentPage;
				this.getParam( this.accountBook, this.relation_type );
				// console.log("点击了" + type + "，当前页：" + currentPage);
			},
			// 收入、支出、总汇点击事件 - 分段器触发事件
			subsectionChange(e){
				this.load();
				this.shouruShow = false
				this.zhichuShow = false
				this.zonghuiShow = false
				this.pageShow    = true
				if(e==0)
				{ 
					this.shouruShow = true; 
					this.relation_type = 2;
					this.moneyType = '收入' 
					this.getParam( this.accountBook, 2 );
				}
				if(e==1)
				{ 
					this.zhichuShow = true; 
					this.relation_type = 3;
					this.moneyType = '支出' 
					this.getParam( this.accountBook, 3 );
				}
				if(e==2)
				{ 
					this.zonghuiShow = true; 
					this.relation_type = 6;
					this.moneyType = '汇总' 
					this.zonghuiGetParam( this.accountBook, 6 );
					this.pageShow = false
				}
			},
			// 同步请求 
			async getParam( accountBook, relation_type ){
				let data = {
					accountBook   : accountBook ,   // 账本
					relation_type : relation_type , // 关联类型（1=工资录入，2=财务收入，3=财务支出）
					rlTime		  : this.rlTime ,   // 时间类型
					straTime 	  : this.straTime , // 周期时间
					endTime 	  : this.endTime ,  // 周期时间
					currentPage   : this.page.currentPage ,   // 当前页数
					pageSize	  : this.page.pageSize, 	  // 每页数量
				}
				let res = await this.asyncPublic('/finance/accountDetailsQuery',data)
				// console.log(res);
				this.data  = res.data.info
				this.money = res.data.money
				this.rlTime = res.data.straTime + ' 至 ' + res.data.endTime
				this.straTime = res.data.straTime
				this.endTime  = res.data.endTime
				this.page.total = res.data.pageTotal
				this.load_close();
			},
			// 总汇同步请求 
			async zonghuiGetParam( accountBook, relation_type ){
				let data = {
					accountBook   : accountBook ,   // 账本
					relation_type : relation_type , // 关联类型（1=工资录入，2=财务收入，3=财务支出）
					rlTime		  : this.rlTime ,   // 时间类型
					straTime 	  : this.straTime , // 周期时间
					endTime 	  : this.endTime ,  // 周期时间
					currentPage   : this.page.currentPage ,   // 当前页数
					pageSize	  : this.page.pageSize, 	  // 每页数量
				}
				let res = await this.asyncPublic('/finance/accountDetailsQueryZonghui',data)
				// console.log(res)
				this.data  = res.data.data
				this.load_close();
			},
			// 日历事件
			change(e) {
				this.load();
				this.straTime = e.startDate
				this.endTime  = e.endDate
				this.rlTime = e.startDate + ' 至 ' + e.endDate
				this.page.currentPage = 1
				if( this.relation_type == 6 )
				{
					this.zonghuiGetParam( this.accountBook, 6 );
				}else{
					this.getParam( this.accountBook, this.relation_type )
				}
			},
			// 当前账本下拉菜单事件
			listChange(e){
				this.load();
				this.accountBook = e.orignItem.type
				this.page.currentPage = 1
				if( this.relation_type == 6 )
				{
					this.zonghuiGetParam( this.accountBook, 6 );
				}else{
					this.getParam( this.accountBook, this.relation_type )
				}
				// console.log(e);
			},
		},
		components:{
			myHeader ,
			xflSelect
		}
	}
</script>

<style scoped lang="scss">
// 	.sr_focus:focus{
// 　　    background-color:#ccc;
// 	}
	.table-h{
		font-size:12px;
		font-weight: bold;
		border: 1px solid #E3E6EC;
	}
	.table view{
		text-align: center;
		border: 1px solid #E3E6EC;
		border-top:none;
		font-weight: bold;
		border-right:none;
		background:#F5F6F8;
		font-size:12px;
		height:30px;
		line-height:30px;
		overflow: hidden;
	}
	.table2 view{
		text-align: center;
		border: 1px solid #E3E6EC;
		border-top:none;
		border-right:none;
		background:#ffff;
		height:35px;
		display:flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	/*收入表格样式*/
	.t-1{
		width:130px;
	}
	.t-2{
		width:120px;
	}
	.t-3{
		width:90px;
	}
	.t-4{
		width:100px;
	}
	.t-5{
		width:80px;
	}
	.t-6{
		width:120px;
	}
	
	/*支出表格样式*/
	.zhichut-1{
		width:110px;
	}
	.zhichut-2{
		width:120px;
	}
	.zhichut-3{
		width:90px;
	}
	.zhichut-4{
		width:80px;
	}
	.zhichut-5{
		width:135px;
	}
	.zhichut-6{
		width:100px;
	}
	
	/*总汇表格样式*/
	.zonghuit-1{
		width:190px;
	}
	.zonghuit-2{
		width:90px;
	}
	.zonghuit-3{
		width:100px;
	}
	.zonghuit-4{
		width:80px;
	}
	.zonghuit-5{
		width:120px;
	}
	.zonghuit-6{
		width:100px;
	}
	
	.main-body {
		background-color: #005687;
	}
	page{
		height:100%;
	}
	.head{
		background:#005687;
	}
</style>
